<template>
  <div class="header-nav-dropdown-wrapper">
    <ul class="ul-dropdown-list">
      <li v-for="item in DATA_LIST" :key="item.value" class="item">
        <div class="item-title" @click.stop="navClick(item)">{{ item.title }}</div>
        <div class="item-text" v-if="item.title != '产业链全景图'" @click.stop="navClick(item)">{{ item.text }}</div>
        <div class="item-text1 right1" v-if="item.title == '产业链全景图'" @click.stop="navClick('黑色产业链')">黑色产业链</div>
        <div class="item-text1 right2" v-if="item.title == '产业链全景图'" @click.stop="navClick('生猪产业链')">生猪产业链</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { DATA_LIST } from './navmenu.data';
// import Vue from 'vue';
// import store from '@/store';
import md5 from 'js-md5';
import { mapGetters } from 'vuex';
import { verifyRoles } from '@/utils/verify';
export default {
  data () {
    return {
      roleId: '',
      DATA_LIST
    };
  },
  computed: {
    ...mapGetters({
      contexInfo: 'contexInfo'
    })
  },
  methods: {
    navClick (item) {
      if (item.title === '股票评级') {
        // 权限控制
        const judge = verifyRoles('data', 0);
        if (judge) {
          this.$emit('nav-click', item);
        }
      } else if (item.title == '产业链' || item == '黑色产业链') {
        const date = this.getCurrentDate();
        const str = 'gtja' + date + 'mysteel';
        const md32 = md5(str);
        const md16 = md32.substr(8, 16);
        const url = 'https://ebc.mysteel.com/home/#/mapLink/ferrous' + '?token=' + md16;
        window.location.href = process.env.VUE_APP_SERVICE_IRONUNIONTNFO + '/' + encodeURIComponent(url);
      } else if (item == '生猪产业链') {
        const date = this.getCurrentDate();
        const str = 'gtja' + date + 'mysteel';
        const md32 = md5(str);
        const md16 = md32.substr(8, 16);
        const url = 'https://ebc.mysteel.com/home/#/mapLink/pig' + '?token=' + md16;
        window.location.href = process.env.VUE_APP_SERVICE_IRONUNIONTNFO + '/' + encodeURIComponent(url);
      } else {
        // if(item.title == '债券日历' ||item.title == '投行主承'){
        //    this.$message('敬请期待');
        //   return;
        // }
        this.$emit('nav-click', item);
      }
    },
    // title: '京东资讯',
    //   value: 'JDInformation',
    //   icon: require('@/assets/img/header/data/ic_car.png'),
    jump1 () {
      // this.$router.push('/adminsys/jdinformation');
      // let url = 'https://jt2.jd.com/jtzx/gtjadh/index.html';
      // this.$router.push({
      //   //  let url= '/adminsys/jdinformation'
      //   name: 'JDInformation',
      //   params: { url },
      //   query: { sourceType: this.$route.query.sources },
      // });
      this.$message('敬请期待');
    },
    jump2 () {
      // window.location.href = 'https://jt2.jd.com/jtzx/gtjadh/annWarning.html';
      // let url = 'https://jt2.jd.com/jtzx/gtjadh/annWarning.html';
      // this.$router.push({
      //   //  let url= '/adminsys/jdinformation'
      //   name: 'JDInformation',
      //   params: { url },
      //   query: { sourceType: this.$route.query.sources },
      // });
      this.$message('敬请期待');
    },
    jump3 () {
      // let url = 'https://jt2.jd.com/jtzx/gtjadh/spDataExponent.html';
      // this.$router.push({
      //   //  let url= '/adminsys/jdinformation'
      //   name: 'JDInformation',
      //   params: { url },
      //   query: { sourceType: this.$route.query.sources },
      // });
      this.$message('敬请期待');
    },
    jump4 () {
      // let url = 'https://jt2.jd.com/jtzx/gtjadh/spDataMarket.html';
      // this.$router.push({
      //   //  let url= '/adminsys/jdinformation'
      //   name: 'JDInformation',
      //   params: { url },
      //   query: { sourceType: this.$route.query.sources },
      // });
      this.$message('敬请期待');
    },
    jump5 () {
      // let url = 'https://jt2.jd.com/jtzx/gtjadh/spDataWatch.html';
      // this.$router.push({
      //   //  let url= '/adminsys/jdinformation'
      //   name: 'JDInformation',
      //   params: { url },
      //   query: { sourceType: this.$route.query.sources },
      // });
      this.$message('敬请期待');
    },
    // 获取当前时间
    getCurrentDate () {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return year + '' + month + '' + day;
    }
  }
};
</script>
<style lang="scss" scoped>
// .header-nav-dropdown-wrapper {
//   background: rgba(238, 244, 255, 0.95);
//   border: 1px solid #d8dce6;
//   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
//   display: flex;
//   .left {
//     // width: 200px;
//     height: 334px;
//     // background: #d5e7fb;
//     padding: 24px 24px 0;
//     // .title {
//     //   font-family: Source Han Sans CN;
//     //   font-style: normal;
//     //   font-weight: bold;
//     //   font-size: 18px;
//     //   line-height: 27px;
//     //   color: #000000;
//     //   margin-bottom: 12px;
//     // }
//     // .text {
//     //   font-family: Source Han Sans CN;
//     //   font-style: normal;
//     //   font-weight: normal;
//     //   font-size: 14px;
//     //   line-height: 21px;

//     //   color: #606f80;
//     //   margin-bottom: 12px;
//     // }
//     .bottom {
//       font-family: 'Source Han Sans CN';
//       font-style: normal;
//       font-weight: 700;
//       font-size: 16px;
//       line-height: 60px;
//       /* identical to box height */

//       color: #1c203f;

//       cursor: pointer;
//       width: 232px;
//       height: 60px;
//       padding-left: 68px;
//       // background: #d5e7fb;
//       border-radius: 4px;
//       background: url('~@/assets/img/header/product/back.png') 20px 15px no-repeat;
//       background-color: #d5e7fb;
//       // background-size: 10px 10px;
//     }
//     .bottom1 {
//       font-family: 'Source Han Sans CN';
//       font-style: normal;
//       font-weight: 700;
//       font-size: 16px;
//       line-height: 60px;
//       /* identical to box height */
//       margin-top: 15px;
//       color: #1c203f;

//       cursor: pointer;
//       width: 232px;
//       height: 60px;
//       padding-left: 68px;
//       // background: #d5e7fb;
//       border-radius: 4px;
//       background: url('~@/assets/img/header/product/back1.png') 20px 15px no-repeat;
//       background-color: #d5e7fb;
//       // background-size: 10px 10px;
//     }
//   }
//   .mleft {
//     margin: 20px 20px 0;
//     width: 340px;
//     .title {
//       font-family: Source Han Sans CN;
//       font-style: normal;
//       font-weight: bold;
//       font-size: 16px;
//       line-height: 24px;
//       /* identical to box height */
//       padding-bottom: 15px;
//       border-bottom: 1px solid #ccd2dc;
//       color: #2b86dd;
//     }
//     .main {
//       margin-top: 14px;
//       display: flex;
//       .left1 {
//         width: 160px;
//         .text {
//           display: flex;
//           font-family: Source Han Sans CN;
//           font-style: normal;
//           font-weight: bold;
//           font-size: 14px;
//           line-height: 21px;
//           /* identical to box height */
//           color: #000000;
//           cursor: pointer;
//           img {
//             width: 16px;
//             height: 16px;
//             margin-right: 6px;
//             margin-top: 2px;
//           }
//           div {
//             flex: 1;
//             background: url('~@/assets/img/header/product/arrow-blue.png') 69px 3px no-repeat;
//           }
//         }
//         .text1 {
//           display: flex;
//           font-family: Source Han Sans CN;
//           font-style: normal;
//           font-weight: bold;
//           font-size: 14px;
//           line-height: 21px;
//           /* identical to box height */
//           color: #000000;
//           // margin-top: 19px;
//           margin-bottom: 7px;
//           img {
//             width: 16px;
//             height: 16px;
//             margin-right: 6px;
//             margin-top: 2px;
//           }
//           div {
//             flex: 1;
//           }
//         }
//         .back {
//           width: 160px;
//           // height: 86px;
//           // left: 580px;
//           // top: 221px;
//           // padding: 8px 0 0;
//           padding-top: 8px;
//           font-size: 12px;
//           line-height: 18px;
//           background: #e2ebfc;
//           cursor: pointer;
//           border-radius: 2px;
//           margin-bottom: 14px;
//           // &:hover {
//           //   color: $app-main-color;
//           // }
//           div {
//             padding-left: 22px;
//             padding-bottom: 8px;
//             &:hover {
//               color: $app-main-color;
//             }
//           }
//         }
//       }
//       .right1 {
//         margin-left: 20px;
//         width: 160px;
//         .text {
//           display: flex;
//           font-family: Source Han Sans CN;
//           font-style: normal;
//           font-weight: bold;
//           font-size: 14px;
//           line-height: 21px;
//           /* identical to box height */
//           color: #000000;
//           img {
//             width: 16px;
//             height: 16px;
//             margin-right: 6px;
//             margin-top: 2px;
//           }
//           div {
//             flex: 1;
//             background: url('~@/assets/img/header/product/arrow-blue.png') 69px 3px no-repeat;
//           }
//         }
//         .text1 {
//           display: flex;
//           font-family: Source Han Sans CN;
//           font-style: normal;
//           font-weight: bold;
//           font-size: 14px;
//           line-height: 21px;
//           /* identical to box height */
//           color: #000000;
//           // margin-top: 19px;
//           margin-bottom: 7px;
//           img {
//             width: 16px;
//             height: 16px;
//             margin-right: 6px;
//             margin-top: 2px;
//           }
//           div {
//             flex: 1;
//           }
//         }
//         .back {
//           width: 160px;
//           // height: 86px;
//           // left: 580px;
//           // top: 221px;
//           // padding: 8px 0 0;
//           padding-top: 8px;
//           font-size: 12px;
//           line-height: 18px;
//           background: #e2ebfc;
//           border-radius: 2px;
//           cursor: pointer;
//           margin-bottom: 14px;
//           div {
//             padding-left: 22px;
//             padding-bottom: 8px;
//             &:hover {
//               color: $app-main-color;
//             }
//           }
//         }
//       }
//     }
//   }
//   .mright {
//     margin: 20px 20px 0;
//     width: 340px;
//     .title {
//       font-family: Source Han Sans CN;
//       font-style: normal;
//       font-weight: bold;
//       font-size: 16px;
//       line-height: 24px;
//       /* identical to box height */
//       padding-bottom: 15px;
//       border-bottom: 1px solid #ccd2dc;
//       color: #2b86dd;
//     }
//     .list {
//       .ul-dropdown-list {
//         display: flex;
//         display: -webkit-flex;
//         justify-content: space-between;
//         flex-direction: row;
//         flex-wrap: wrap;
//         margin-top: 14px;
//         .item {
//           cursor: pointer;
//           width: 160px;
//           margin-bottom: 19px;
//           // &:hover {
//           //   color: $app-main-color;
//           // }
//           .item-icon {
//             width: 16px;
//             height: 16px;
//             margin-right: 6px;
//             margin-bottom: 2px;
//           }
//           .item-title {
//             flex: 1;
//             font-family: Source Han Sans CN;
//             font-style: normal;
//             font-weight: bold;
//             font-size: 14px;
//             line-height: 21px;
//             /* identical to box height */
//             color: #000000;
//             &:hover {
//               color: $app-main-color;
//             }
//           }
//           .item-i {
//             margin-left: 13px;
//           }
//         }
//       }
//     }
//   }
//   .right {
//     margin: 20px 20px 0;
//     width: 200px;
//     .rmain {
//       display: flex;
//       width: 200px;
//       height: 56px;
//       background: linear-gradient(180deg, #eef4ff 0%, #f4f8ff 100%);
//       border: 2px solid #ffffff;
//       box-sizing: border-box;
//       box-shadow: 0px 2px 4px 2px rgba(197, 210, 232, 0.88);
//       border-radius: 4px;
//       img {
//         width: 34px;
//         height: 34px;
//         margin: 12px 0 0 20px;
//       }
//       div {
//         cursor: pointer;
//         width: 64px;
//         height: 24px;
//         font-family: Source Han Sans CN;
//         font-style: normal;
//         font-weight: bold;
//         font-size: 16px;
//         line-height: 24px;
//         /* identical to box height */
//         margin: 16px 0 0 17px;

//         color: #1c203f;
//       }
//     }
//   }
// }
@import '@/styles/header.nav.scss';
</style>
